<script lang="ts" setup>
import { h } from 'vue'
import { GENDER_COLOR, GENDER_ICON, PET_GENDER, USER_GENDER } from "@/const/gender";

interface IProps {
	gender: number | null;
	isPet?: boolean;
}

const props = withDefaults(defineProps<IProps>(), {gender: 2})

const IconItem = () => props.gender === 2 || props.gender === null || GENDER_ICON[props.gender?.toString()] === undefined ? null : h(GENDER_ICON[props.gender])

const TextName = () => props.isPet ? PET_GENDER[props.gender?.toString()] : USER_GENDER[props.gender?.toString()]
</script>
<template>
	<div :style="`display: inline-flex;align-items: center;color:${GENDER_COLOR[gender?.toString()]}`">
		<n-icon v-if="gender!==2&&gender!==null" style="margin-right: 4px;">
			<IconItem/>
		</n-icon>
		<TextName/>
	</div>
</template>
